<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
	<head>
		<title>散客采购</title>
		<jsp:include page="../inc_min.jsp"></jsp:include>
    	<link rel="stylesheet" href="${ctx}/css/flightQuery.css" />
   		<link rel="stylesheet" href="${ctx}/css/iconfont.css"/>
        <style type="text/css">
            .grey{
                color:#666666;
                border-left: 1px solid #ececec;
                border-bottom: 1px solid #34c0e3;
            }
            /* .grey:hover{
                color:white;
                background: #34c0e3;
                border-bottom: none;
            } */
            .tab{
                width:1300px;
                height:49px;
                margin:0 auto;
                overflow: hidden;
            }
            .tab li{
                float:left;
                width:170px;
                height:48px;
                text-align: center;
            }
            .specTab{
                border-right: 1px solid #ececec;
            }
            .redBig{
                color:#ff6600;
                font-size: 14px;
                font-weight:bold;
            }
            .distance{
                display: inline-block;
                margin-top:7px;
            }
            .white{
            	color:white;
                background: #34c0e3;
                border-bottom: none;
            }
            
            .clickBor{
                background: #fff;
                border-bottom:1px solid white;
                border-top:3px solid #34c0e3;
                border-left: 1px solid #34c0e3;
                border-right: 1px solid #34c0e3;
            }
        </style>

        <script type="text/javascript">
		var deptCity="";//出发城市
		var arrCity="";//到达城市
		var deptStartDate="";//出发日期
		var deptEndDate="";//出发日期
		var seatClass="";//舱位
		var charterType="";//类型
		var routingType="";
		$(function(){
			//点击按照条件查询
            $("#query").click(function(){
                charterType="SK";
                deptCity=$("#startCity").val();
                arrCity=$("#arrCity").val();
                deptStartDate=$("#startDate").val();
                seatClass=$("#seat").val();
                routingType=$('input[name="routingType"]:checked').val();
                query();
            });
		});
		function query(){
            $("#loading").empty();
            var param = {
                deptCity:deptCity,
                arrCity:arrCity,
                deptStartDate:deptStartDate,
                seatClass:seatClass,
                charterType:charterType,
                routingType:routingType
            }
            $.ajax({
                type: "GET",
                url: "${ctx}/flight/queryFlight?temp="+Math.random(),
                data: param,
                dataType: "json",
                beforeSend:function(XMLHttpRequest){
                    $("#loading").append("<div style='margin:0 auto; width:200px; height:100px;border:1px'>正在检索航班信息...<img src='${ctx}/image/loading.gif'></div>");
                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    $("#loading").append("<div style='margin:0 auto; width:400px; height:100px;border:1px'><h2>请求发生错误！</h2></div>");
                },
                success: function(data) {
                    $("#loading").empty();
                    $("#tab").empty();
                    $("#tb").empty();
                    if (data.status == 1002 || data.data.length == 0) {
                        $("#loading").append("<div style='margin:0 auto; width:400px; height:100px;border:1px'><h2>没有找到相匹配的航班信息</h2></div>");
                        return false;
                    }
                    var obj = data.data;
                    var tab = "";
                    $.each(obj, function (n, item) {
                        var date = item.date;
                        //tab页
                        if(deptStartDate == date){//时间对应 选中
                            tab += "<li class='grey clickBor' name='check'><span class='distance'>"+date+"</span><span>"+getWeek(date)+"</span><br/>￥<span class='redBig'>"+CommonConverter.toEmptyString(item.minPrice)+"</span></li>";
                        }else if(n == obj.length-1){
                            tab += "<li class='grey specTab'><span class='distance'>"+date+"</span><span>"+getWeek(date)+"</span><br/>￥<span class='redBig'>"+CommonConverter.toEmptyString(item.minPrice)+"</span></li>";
                        }else{
                            tab += "<li class='grey'><span class='distance'>"+date+"</span><span>"+getWeek(date)+"</span><br/>￥<span class='redBig'>"+CommonConverter.toEmptyString(item.minPrice)+"</span></li>";
                        }
                        //数据行
                        if(deptStartDate == date) {//只显示选中行
                            var products = item.products;
                            a = products;
                            if(products.length == 0){
                                $("#loading").append("<div style='margin:0 auto; width:400px; height:100px;border:1px'><h2>没有找到相匹配的航班信息</h2></div>");
                                return;
                            }
                            //循环当前产品中的所有航班信息
                            $.each(products, function (m, pro) {
                                var segments = pro.segments;
                                var flightNo = "";
                                var intevarDay = "";
                                var tomDay = "";
                                if(segments.length == 2){//往返
                                    var segmentsa = segments[0];
                                    var segmentsb = segments[1];
                                    flightNo+="往：<span style='color:black;'>"+segmentsa.flightNo+"</span><br/>";
                                    flightNo+="返：<span style='color:black;'>"+segmentsb.flightNo+"</span>";
                                    var day = GetDateDiff(segmentsa.depDate,segmentsb.depDate,'day') - 0;
                                    var tom = GetDateDiff(segmentsa.depDate,segmentsa.arrDate,'day') - 0;
                                    if(tom != 0){
                                        tomDay = "+" + tom;
                                    }
                                    if(day <= 1){
                                        intevarDay = "1天";
                                    }else{
                                        intevarDay = day + "天" + (day-1) + "晚";
                                    }
                                    var image = "";
                                    if(segmentsa.stopover.length !=0 || segmentsb.stopover.length !=0){
                                        var stop = "";
                                        if(segmentsa.stopover.length !=0){
                                            $.each(segmentsa.stopover, function (o, stopOver) {
                                                stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                            });
                                        }
                                        if(segmentsb.stopover.length !=0){
                                            stop = "";
                                            $.each(segmentsb.stopover, function (o, stopOver) {
                                                stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                            });
                                        }
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/stop.gif' class='tip' data-title='详情' data-content='"+stop+"'><br/>";
                                        image+="<span style='color:#23b9dc'>"+segmentsb.depDate+"</span>";

                                    }else{
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/round.gif'><br/>";
                                        image+="<span style='color:#23b9dc'>"+segmentsb.depDate+"</span>";
                                    }
                                    var depAp = "";
                                    var arrAp = "";
                                    if(segmentsa.arrAp == segmentsb.depAp){
                                        depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";
                                        depAp+="<span>"+segmentsb.arrTime+"</span><br/>";

                                        arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsb.depApCn+"</span><span style='color:#444e50'>("+segmentsb.depAp+")</span><span style='color:#e2615c'>"+segmentsb.depTerminal+"</span><br/>";
                                        arrAp+="<span>"+segmentsb.depTime+"</span><br/>";
                                    }else{
                                        depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsb.arrApCn+"</span><span style='color:#444e50'>("+segmentsb.arrAp+")</span><span style='color:#e2615c'>"+segmentsb.arrTerminal+"</span><br/>";
                                        depAp+="<span>"+segmentsb.arrTime+"</span><br/>";

                                        arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsa.arrApCn+"</span><span style='color:#444e50'>("+segmentsa.arrAp+")</span><span style='color:#e2615c'>"+segmentsa.arrTerminal+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsb.depApCn+"</span><span style='color:#444e50'>("+segmentsb.depAp+")</span><span style='color:#e2615c'>"+segmentsb.depTerminal+"</span><br/>";
                                        arrAp+="<span>"+segmentsb.depTime+"</span><br/>";
                                    }
                                }else{
                                    var segmentsa = segments[0];
                                    var tom = GetDateDiff(segmentsa.depDate,segmentsa.arrDate,'day') - 0;
                                    if(tom != 0){
                                        tomDay = "+" + tom;
                                    }
                                    flightNo="<span style='color:black;'>"+segmentsa.flightNo+"</span><br/>";
                                    var image = "";
                                    if(segmentsa.stopover.length !=0){
                                        var stop = "";
                                        $.each(segmentsa.stopover, function (o, stopOver) {
                                            stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                        });
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/toStop.png' class='tip' data-title='详情' data-content='"+stop+"'/><br/>";
                                    }else{
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/dancheng.png'><br/>";
                                    }
                                    var depAp = "";
                                    var arrAp = "";
                                    depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                    depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";

                                    arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                    arrAp+="<span style='color:#444e50'>"+segmentsa.arrApCn+"</span><span style='color:#444e50'>("+segmentsa.arrAp+")</span><span style='color:#e2615c'>"+segmentsa.arrTerminal+"</span><br/>";
                                }
                                var str = "";
                                str+="<tr height='90px'>"
                                str+="    <td width='160px' align='center'>"
                                str+= flightNo
                                str+="    </td>"
                                str+="    <td width='208px' align='right'>"
                                str+= depAp
                                str+="    </td>"
                                str+="    <td width='165px' align='center'>"
                                str+= image
                                str+="    </td>"
                                str+="    <td width='208px'>"
                                str+= arrAp
                                str+="    </td>"
                                str+="    <td width='88px' align='center' style='color:#23b9dc'>"+CommonConverter.toFlightCabinTypeStr(pro.fare.seatClass)+"</td>"
                                str+="    <td width='86px' align='center' style='color:#23b9dc'>"+pro.productSeats+"</td>"
                                str+="    <td width='96px' align='center' style='color:#23b9dc'>"+intevarDay+"</td>"
                                str+="    <td width='151px' align='center' style='color:#e2615c'>"+pro.fare.adultPrice+"（CNY/张）</td>"
                                str+="    <td width='139px' align='center'>"
                                //str+=" <svg class='icon pisiton' aria-hidden='true' onclick=book("+m+","+item.supplier+")><use xlink:href='#icon-yudinggouwu'></use></svg>";
                                str +='<i class="icon iconfont " title="预定" onclick=book('+m+','+item.supplier+')>&#xe6da;</i>';
                               /*  str+="        <p>"
                                str+="            行李信息：1234<br/>"
                                str+="            出票实现：12343"
                                str+="        </p>" */
                                str+="    </td>"
                                str+="</tr>"
                                $("#tb").append(str);
                            });
                        }
                    });
                    $('.tip').webuiPopover({ trigger:'hover',width:300,padding:true,placement:'bottom-right'});
                    $("#tab").append(tab);
                    $(".grey").hover(function(){
                    	$(".redBig").css("color","#ff6600");
                    	$(".grey").removeClass("white");
                    	if($(this).attr("name") == "check"){
                    		return;
                    	}else{
                    		$(this).addClass("white");
                    		$(this).find(".redBig").css("color","#f2fc22");
                    	};
                    },function(){
                    	$(".grey").removeClass("white");
                    	$(".redBig").css("color","#ff6600");
                    });
                    $(".grey").click(function(){
                    	$(".redBig").css("color","#ff6600");
                        $(".grey").removeClass("clickBor white");
                        $(".grey").removeAttr("name");
                        $(this).addClass("clickBor");
                        $(this).attr("name","check");
                        var newDate = $(this).find(".distance").html();
                        if(deptStartDate != newDate){
                            deptStartDate = newDate;
                            query();
                        }
                    });
                }
			});
		}
		<c:if test="${requestScope.query == '1'}">
			charterType="SK";
			deptCity='${requestScope.deptCity}';
			arrCity='${requestScope.arrCity}';
			deptStartDate='${requestScope.deptStartDate}';
			seatClass='${requestScope.seatClass}';
			routingType='${requestScope.routingType}';
			query();
		</c:if> 
		
		</script>
	</head>
	<body>
    <jsp:include page="../head.jsp"></jsp:include>
    <div class="content">
        <ul class="search">
            <li>
            	出发城市
           	 	<input type="text" class="cityInput" value="${requestScope.deptCityName}" size="15" id="homecity_name" name="homecity_name"  mod="address|notice" mod_address_source="hotel" mod_address_suggest="" mod_address_reference="startCity" mod_notice_tip="中文/拼音" />
				<input id="startCity" name="startCity" type="hidden" value="${requestScope.deptCity}" />
            </li>
            <li>
				到达城市
				<input type="text" class="cityInput" value="${requestScope.arrCityName}" size="15" id="getcity_name" name="getcity_name" mod="address|notice" mod_address_source="hotel"  mod_address_reference="arrCity" mod_notice_tip="中文/拼音" />
				<input id="arrCity" name="arrCity" type="hidden" value="${requestScope.arrCity}" />
            </li>
            <li class="timeLi1">
             	    出发日期：<input type="text" id="startDate" class="Wdate" value="${requestScope.deptStartDate}" onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-\#{%d+2}'})" />
            </li>
            <li>
           		     舱位：
                <select id="seat">
                	<option value="">请选择</option>
                    <option value="Y" <c:if test="${requestScope.seatClass == 'Y'}">selected="selected"</c:if>>经济舱</option>
                    <option value="F" <c:if test="${requestScope.seatClass == 'F'}">selected="selected"</c:if>>头等舱</option>
                    <option value="C" <c:if test="${requestScope.seatClass == 'C'}">selected="selected"</c:if>>商务舱</option>
                </select>
            </li>
            <li style="line-height: 20px">
            	航程类型：
            	<input type="radio" style="width:15px;" name="routingType" id="routeType1" value="RT" <c:if test="${requestScope.routingType == 'RT'}">checked="checked"</c:if>><label for="routeType1">往返程</label>
           		 <input type="radio" style="width:15px;" name="routingType" id="routeType2" value="OW" <c:if test="${requestScope.routingType == 'OW'}">checked="checked"</c:if>><label for="routeType2">单程</label>
            </li>
            <li class="queryBox">
            	<input type="button" value="查询" class="query" id="query"/>
            </li>
        </ul>
        <ul class="tab" id="tab">
        </ul>

        <table class="table">
				<thead>
					<tr height="38px" >
						<td width="160px" align="center"><img src="${ctx}/image/flightQuery/flightNumber.gif">航班号</td>
						<td width="208px" align="right"><img src="${ctx}/image/flightQuery/flightStart.gif">出发</td>
						<td width="165px" align="center">&nbsp;&nbsp;&nbsp;</td>
						<td width="208px"><img src="${ctx}/image/flightQuery/flightEnd.gif">到达</td>
						<td width="88px" align="center">舱位</td>
						<td width="86px" align="center">座位数</td>
						<td width="96px" align="center">行程天数</td>
						<td width="151px" align="center">单价含税（CNY/张）</td>
						<td width="139px" align="center">操作</td>
					</tr>
				</thead>
				<tbody id="tb" >

                </tbody>
		</table>
        <div id="loading" style="text-align: center;line-height: 100px"></div>
	</div>

	
<form method="post" id="bookingForm"><input type="hidden" name="b" id="b"></form>
<script type="text/javascript" src="${ctx }/jslib/airport/fixdiv.js"></script>
<script type="text/javascript" src="${ctx }/jslib/airport/address.js"></script>
<script type="text/javascript" src="${ctx}/jslib/biz/bookingForSearching.js" charset="utf-8"></script>
<script>	
function book(i,supplier){
	gotoBooking(a[i],supplier,'bookingForm','b','${ctx}/order/book');
}
$(function(){

});
</script>

<!-- 底部 -->
<jsp:include page="../footer.jsp"></jsp:include> 	
</body>
</html>